<script lang="ts" setup>
import { ref, onMounted, reactive, watch } from 'vue'
import indexText from './index.json'
import { requestAllMV } from '../../utils/axiosURL'


// 地区下标
let areaIndex = ref<number>(0)
// 地区标识
let areaTag = ref<string>('')
// 类型下标
let typeIndex = ref<number>(0)
// 类型标识
let typeTag = ref<string>('')
// 排序下标
let sortIndex = ref<number>(0)
// 排序标识
let sortTag = ref<string>('')
// 偏移量
let offset = ref<number>(0)
//  mv数据
let MVData = reactive<any>([])


// 点击地区的事件处理函数
let areaFn = (name: string, index: number) => {
    areaIndex.value = index
    areaTag.value = name
}
// 点击类型的事件处理函数
let typeFn = (name: string, index: number) => {
    typeIndex.value = index
    typeTag.value = name
}
// 点击排序事件处理函数
let sortFn = (name: string, index: number) => {
    sortIndex.value = index
    sortTag.value = name
}
const load = () => {
    offset.value += 1
    requestAllMV(areaTag.value, typeTag.value, sortTag.value, offset.value).then((data: any) => {
        MVData.values = [...MVData.values, ...data.data]
    }).catch(_ => { })
}
watch([areaTag, sortTag, typeTag], () => {
    offset.value = 0
    MVData.values = []
    requestAllMV(areaTag.value, typeTag.value, sortTag.value, offset.value).then(({ data }: any) => {
        MVData.values = [...MVData.values, ...data]
    }).catch(_ => { })
})
const requestAllMVFn = () => {
    requestAllMV(areaTag.value, typeTag.value, sortTag.value, offset.value).then(({ data }: any) => {
        MVData.values = data
    }).catch(_ => { })
}
onMounted(() => {
    requestAllMVFn()
})

</script>


<template>
    <div class="AllMVWrap">
        <p class="fixedTop">
            <span>{{ indexText.AllMV }}</span>
        </p>
        <div class="CateTop">
            <div class="areaWrap">
                <span class="area">{{ indexText.cateArr[0].name }}:</span>
                <ul>
                    <li v-for="(item, index) in indexText.cateArr[0].areaArr" @click="areaFn(item.name, index)"
                        :class="index === areaIndex ? 'active' : ''">{{ item.name }}</li>
                </ul>
            </div>
            <div class="typeWrap">
                <span class="type">{{ indexText.cateArr[1].name }}:</span>
                <ul>
                    <li v-for="(item, index) in indexText.cateArr[1].typeArr" @click="typeFn(item.name, index)"
                        :class="index === typeIndex ? 'active' : ''">{{ item.name }}</li>
                </ul>
            </div>
            <div class="sortWrap">
                <span class="sort">{{ indexText.cateArr[2].name }}:</span>
                <ul>
                    <li v-for="(item, index) in indexText.cateArr[2].sortArr" @click="sortFn(item.name, index)"
                        :class="index === sortIndex ? 'active' : ''">{{ item.name }}</li>
                </ul>
            </div>
        </div>
        <div class="videoItemWrap" v-infinite-scroll="load">
            <MVItem v-if="MVData.values.length" v-for="item in MVData.values" :name="item.name" :imgurl16v9="item.cover"
                :duration="item.duration" :playCount="item.playCount" :id="item.id" />
            <MVItemSkeleton v-else v-for="item in 15" />
        </div>
    </div>
</template>


<style lang="scss" scoped>
.AllMVWrap {
    @extend .pageWrapSize;
    position: relative;
    padding-left: 30px;

    .fixedTop {
        @extend .moduleTitle;
        z-index: 1;
        position: fixed;
        top: 60px;
        width: 100%;
        line-height: 60px;
        background-color: #fff;
        font-weight: 600;
    }

    .CateTop {
        margin-top: 60px;

        .areaWrap {
            display: flex;
            align-items: center;
            width: 100%;
            padding-left: 10px;
            box-sizing: border-box;

            .area {
                flex-basis: 40px;
                font-size: $font-size-xs;
                font-family: $textFont;
            }

            ul {
                flex: 1;
                display: flex;
                align-items: center;

                li {
                    width: 60px;
                    text-align: center;
                    font-size: $font-size-xs;
                    font-family: $textFont;
                    margin-left: 15px;
                    padding: 3px 0 3px;
                    color: #888;
                    border-radius: 25px;

                    &:hover {
                        color: #000;
                    }
                }
            }
        }

        .typeWrap {
            display: flex;
            align-items: center;
            width: 100%;
            padding-left: 10px;
            box-sizing: border-box;
            margin: 10px 0;

            .type {
                flex-basis: 40px;
                font-size: $font-size-xs;
                font-family: $textFont;
            }

            ul {
                flex: 1;
                display: flex;
                align-items: center;

                li {
                    width: 60px;
                    text-align: center;
                    font-size: $font-size-xs;
                    font-family: $textFont;
                    margin-left: 15px;
                    padding: 3px 0 3px;
                    color: #888;
                    border-radius: 25px;

                    &:hover {
                        color: #000;
                    }
                }
            }
        }

        .sortWrap {
            display: flex;
            align-items: center;
            width: 100%;
            padding-left: 10px;
            box-sizing: border-box;
            margin: 10px 0;

            .sort {
                flex-basis: 40px;
                font-size: $font-size-xs;
                font-family: $textFont;
            }

            ul {
                flex: 1;
                display: flex;
                align-items: center;

                li {
                    width: 60px;
                    text-align: center;
                    font-size: $font-size-xs;
                    font-family: $textFont;
                    margin-left: 15px;
                    padding: 3px 0 3px;
                    color: #888;
                    border-radius: 25px;

                    &:hover {
                        color: #000;
                    }
                }
            }
        }
    }

    .videoItemWrap {
        display: flex;
        flex-wrap: wrap;
    }
}

.active {
    // color: $font_red_color !important;
    // background-color: rgb(253, 236, 236);
    @include background_color('bk_color');
    @include color('color');
}
</style>